<template>
  <div class="login">
    <div class="login-wrapper">
      <div class="login-content">
        <div class="login-main">
          <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
          <el-form class="el-form login-form" :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item style="margin-left: 0" prop="userName">
              <el-input v-model="ruleForm.userName" type="text" :placeholder="$t('message.login.placeholder1')" prefix-icon="el-icon-user" clearable autocomplete="off" />
            </el-form-item>
            <el-form-item style="margin-left: 0" prop="password">
              <el-input v-model="ruleForm.password" type="password" :placeholder="$t('message.login.placeholder2')" prefix-icon="el-icon-lock" autocomplete="off" :show-password="true" />
            </el-form-item>
            <el-form-item style="margin: 40px 0 0">
              <el-button type="primary" class="login-submit" :loading="submit.loading" @click="submitForm('ruleForm')">
                <span>{{ $t("message.login.btnText") }}</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="vue-particles">
      <vue-particles color="#dedede" shape-type="star" lines-color="#dedede" hover-mode="grab" click-mode="push" style="height: 100%" />
    </div>
  </div>
</template>

<script>
import { Session } from "@/utils/storage";
import { PrevLoading } from "@/utils/loading.js";
export default {
  name: "Login",
  data() {
    return {
      submit: {
        loading: false,
      },
      ruleForm: {
        userName: "admin",
        password: "123456",
        // userName: "",
        // password: "",
      },
      rules: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {
    // 获取布局配置信息
    getThemeConfig() {
      return this.$store.state.themeConfig.themeConfig;
    },
  },
  methods: {
    // 登录按钮点击
    submitForm(formName) {
      this.submit.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          setTimeout(() => {
            let defaultRoles = [];
            let defaultAuthBtnList = [];
            // admin 页面权限标识，对应路由 meta.roles
            const adminRoles = ["admin"];
            // admin 按钮权限标识
            const adminAuthBtnList = [
              "btn.add",
              "btn.del",
              "btn.edit",
              "btn.link",
            ];
            // common 页面权限标识，对应路由 meta.roles
            const testAuthPageList = ["common"];
            // test 按钮权限标识
            const testAuthBtnList = ["btn.add", "btn.link"];
            if (this.ruleForm.userName === "admin") {
              defaultRoles = adminRoles;
              defaultAuthBtnList = adminAuthBtnList;
            } else {
              defaultRoles = testAuthPageList;
              defaultAuthBtnList = testAuthBtnList;
            }
            const userInfos = {
              userName: "admin",
              photo:"",
              time: new Date().getTime(),
              roles: defaultRoles,
              authBtnList: defaultAuthBtnList,
            };
            // 存储 token 到浏览器缓存
            Session.set("token", Math.random().toString(36).substr(0));
            // 存储用户信息到浏览器缓存
            Session.set("userInfo", userInfos);
            // 存储用户信息到vuex
            this.$store.dispatch("userInfos/setUserInfos", userInfos);
            PrevLoading.start();
            window.location.href = `${window.location.origin}${window.location.pathname}`;
          }, 300);
          this.submit.loading = false;
        } else {
          this.submit.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  position: relative;
  .vue-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/public/images/login-bg.jpg");
    background-size: cover;
  }
  .login-wrapper {
    margin: auto;
    height: 420px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .login-content {
      border-radius: 15px;
      width: 460px;
      padding: 20px;
      position: relative;
      align-items: center;
      display: flex;
      background-color: rgba(255, 255, 255, 0.3);
      .login-main {
        margin: 0 auto;
        width: 70%;
        .login-title {
          color: #333;
          margin-bottom: 40px;
          font-weight: 600;
          font-size: 25px;
          text-align: center;
          letter-spacing: 2px;
        }
        .login-form {
          margin: 10px 0;
          i {
            color: #333;
          }
          .el-form-item {
            margin-bottom: 20px !important;
            .login-submit {
              width: 100%;
              height: 45px;
              letter-spacing: 2px;
              font-weight: 300;
              font-size: 16px;
            }
          }
        }
        .login-menu {
          margin-top: 30px;
          width: 100%;
          text-align: left;
          a {
            color: #999;
            font-size: 12px;
            margin: 0;
            text-decoration: none;
            &:hover {
              color: #1e9fff;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
